<template>
  <view class="shop-container">
    <view class="shop-header">
      <text class="title">商店</text>
      <text class="coins">金币: {{ pet.coins || 0 }}</text>
    </view>

    <view class="shop-tabs">
      <view 
        v-for="tab in ['食物', '玩具']" 
        :key="tab"
        :class="['tab-item', { active: currentTab === tab }]"
        @click="currentTab = tab"
      >
        {{ tab }}
      </view>
    </view>

    <view class="shop-content">
      <view v-if="currentTab === '食物'" class="items-grid">
        <view 
          v-for="item in shopItems.food" 
          :key="item.type"
          class="shop-item"
          :class="{ disabled: (pet.coins || 0) < item.price }"
          @click="buyItem(item)"
        >
          <view class="item-icon">🍖</view>
          <view class="item-info">
            <text class="item-name">{{ getFoodName(item.type) }}</text>
            <text class="item-price">{{ item.price }} 金币</text>
            <view class="item-effects">
              <text>饥饿 +{{ item.effects.hunger }}</text>
              <text>心情 +{{ item.effects.happiness }}</text>
            </view>
          </view>
        </view>
      </view>

      <view v-else class="items-grid">
        <view 
          v-for="item in shopItems.toys" 
          :key="item.type"
          class="shop-item"
          :class="{ disabled: (pet.coins || 0) < item.price }"
          @click="buyItem(item)"
        >
          <view class="item-icon">🎾</view>
          <view class="item-info">
            <text class="item-name">{{ getToyName(item.type) }}</text>
            <text class="item-price">{{ item.price }} 金币</text>
            <view class="item-effects">
              <text>心情 +{{ item.effects.happiness }}</text>
              <text>体力 {{ item.effects.energy }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'Shop',
  
  data() {
    return {
      currentTab: '食物'
    }
  },

  computed: {
    ...mapState(['inventory', 'pet']),
    ...mapGetters(['shopItems'])
  },

  methods: {
    getFoodName(type) {
      const names = {
        BASIC: '普通食物',
        PREMIUM: '高级食物',
        DELUXE: '豪华食物'
      }
      return names[type]
    },

    getToyName(type) {
      const names = {
        BASIC: '普通玩具',
        PREMIUM: '高级玩具',
        DELUXE: '豪华玩具'
      }
      return names[type]
    },

    buyItem(item) {
      if ((this.pet.coins || 0) >= item.price) {
        // 扣除金币
        this.$store.commit('updateCoins', -item.price)
        
        // 应用物品效果
        if (item.effects.hunger) {
          this.$store.commit('updatePetStatus', {
            key: 'hunger',
            value: Math.min(100, this.pet.hunger + item.effects.hunger)
          })
        }
        if (item.effects.happiness) {
          this.$store.commit('updatePetStatus', {
            key: 'happiness',
            value: Math.min(100, this.pet.happiness + item.effects.happiness)
          })
        }
        
        // 显示提示
        uni.showToast({
          title: '购买成功',
          icon: 'success'
        })
      } else {
        uni.showToast({
          title: '金币不足',
          icon: 'error'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.shop-container {
  padding: 20rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

  .shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }

    .coins {
      font-size: 32rpx;
      color: #666;
      background: rgba(255, 215, 0, 0.1);
      padding: 8rpx 16rpx;
      border-radius: 12rpx;
    }
  }

  .shop-tabs {
    display: flex;
    margin-bottom: 20rpx;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12rpx;
    padding: 4rpx;

    .tab-item {
      flex: 1;
      text-align: center;
      padding: 12rpx;
      font-size: 28rpx;
      color: #666;
      border-radius: 8rpx;
      transition: all 0.3s;

      &.active {
        background: #fff;
        color: #333;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
      }
    }
  }

  .items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
  }

  .shop-item {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    display: flex;
    gap: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s;

    &:active {
      transform: scale(0.98);
    }

    &.disabled {
      opacity: 0.6;
      pointer-events: none;
    }

    .item-icon {
      font-size: 48rpx;
    }

    .item-info {
      flex: 1;

      .item-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
      }

      .item-price {
        font-size: 24rpx;
        color: #666;
        margin-bottom: 8rpx;
      }

      .item-effects {
        display: flex;
        flex-direction: column;
        gap: 4rpx;

        text {
          font-size: 22rpx;
          color: #888;
          background: rgba(0, 0, 0, 0.03);
          padding: 2rpx 8rpx;
          border-radius: 6rpx;
        }
      }
    }
  }
}
</style>
